<template>
	<div class="padding20 member">
		<div class="form">
			<el-form @submit.native.prevent @keyup.enter.native="toSearch" inline>
				<el-form-item>
					<el-input prefix-icon="el-icon-search" v-model="search.phone" autocomplete="off" placeholder="请输入手机号" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-input prefix-icon="el-icon-search" v-model="search.nickName" autocomplete="off" placeholder="请输入昵称" clearable></el-input>
				</el-form-item>
				<el-form-item v-show="collapse.flag">
					<el-date-picker v-model="createDate" type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="medium" icon="el-icon-search" @click="toSearch">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="medium" icon="el-icon-refresh-left" @click="resetQueryForm">重置</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="text" @click="handleCollapseState">
						{{ collapse.label }}
						<i :class="collapse.icon"></i>
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-table :data="tableData" row-key="id">
			<el-table-column prop="avatar" label="头像" width="120">
				<template slot-scope="scope">
					<el-image v-if="scope.row.avatar" :src="scope.row.avatar" style="width: 60px; height: 60px; border-radius: 50%;" :preview-src-list="[scope.row.avatar]" />
				</template>
			</el-table-column>
			<el-table-column prop="nickName" label="用户昵称" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="phone" label="手机号" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="createTime" label="注册时间" :show-overflow-tooltip="true"></el-table-column>
			<!-- <el-table-column prop="createTime" label="积分 / 余额" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="createTime" label="成交" :show-overflow-tooltip="true"></el-table-column> -->
			<!-- <el-table-column prop="createTime" label="来源" :show-overflow-tooltip="true"></el-table-column> -->
			<el-table-column label="操作" :show-overflow-tooltip="true">
				<template #default="{row}">
					<el-button v-if="$tools.hasPermission('member:member:edit')" size="mini" @click="handleEdit(row)" icon="el-icon-edit" type="warning" title="编辑"></el-button>
					<el-popconfirm confirm-button-text="删除" cancel-button-text="取消" icon="el-icon-info" icon-color="red" title="确定删除吗？" @confirm="handleDelete(row)" v-if="$tools.hasPermission('member:member:delete')">
						<template #reference>
							<el-button size="mini" type="danger" icon="el-icon-delete" title="删除"></el-button>
						</template>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<br />
		<fortress-pagination :total="total" :current-page="current" :page-size="size" @refreshData="onCurrentSizeChange"></fortress-pagination>
	</div>
</template>

<script>
import { memberPage, memberDel, memberDelBatch, memberDynamicExport } from "@/api/member/member.js"
import FortressPagination from "@/components/fortress-pagination.vue"

export default {
	name: "member",
	props: {},
	data() {
		return {
			createDate: [],
			search: {
				userName: "",
				phone: "",
				status: "",
				nickName: "",
				auditStatus: "",
			},
			YesNoList: [],
			MemberStatusList: [],
			levelIdList: [],
			tableData: [],
			total: 0,
			current: 1,
			size: 10,
			collapse: {
				icon: "el-icon-arrow-down el-icon--right",
				label: "展开",
				flag: false,
			},
			pickerOptions: {
				shortcuts: [
					{
						text: "最近一周",
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
							picker.$emit("pick", [start, end])
						},
					},
					{
						text: "最近一个月",
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
							picker.$emit("pick", [start, end])
						},
					},
					{
						text: "最近三个月",
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
							picker.$emit("pick", [start, end])
						},
					},
				],
			},
		}
	},
	computed: {},
	created() {
		this.toSearch()
	},
	methods: {
		//切换查询条件收缩框
		handleCollapseState() {
			this.collapse.flag = !this.collapse.flag
			if (this.collapse.flag) {
				this.collapse.icon = "el-icon-arrow-up el-icon--right"
				this.collapse.label = "收起"
			} else {
				this.collapse.icon = "el-icon-arrow-down el-icon--right"
				this.collapse.label = "展开"
			}
		},
		toSearch() {
			this.current = 1
			this.tableData = []
			if (!this.createDate) {
				this.createDate = []
			}
			this.search.startTime = this.createDate[0] || ""
			this.search.endTime = this.createDate[1] || ""
			this.getList()
		},
		resetQueryForm() {
			this.search = {
				userName: "",
				phone: "",
				status: "",
				nickName: "",
				auditStatus: "",
			}
			this.createDate = []
			this.toSearch()
		},
		async getList() {
			try {
				const { code, data, msg } = await memberPage({
					current: this.current,
					size: this.size,
					...this.search,
				})
				if (code != 0) {
					throw new Error(msg)
				}
				this.tableData = data.records
				this.total = data.total
			} catch (error) {
				this.$msg({
					message: error,
					type: "error",
				})
			}
		},
		onCurrentSizeChange({ current, size }) {
			this.current = current
			this.size = size
			this.getList()
		},

		handleEdit(row) {
			this.$router.push("/member/member-edit?id=" + row.id)
		},
		handleDelete(row) {
			memberDel(row.id).then(resp => {
				if (resp.code == 0) {
					this.$message({
						type: "success",
						message: "操作成功!",
					})
					//判断是否最后一页的最后一条记录
					let totalPages = (this.total - 1) % this.size == 0 ? (this.total - 1) / this.size : (this.total - 1) / this.size + 1
					if (this.current > totalPages && this.current != 1) {
						this.current = this.current - 1
					}
					this.getList()
				} else {
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
			})
		},

		levelIdFmt(row) {
			let name = ""
			if (this.levelIdList) {
				this.levelIdList.forEach(item => {
					if (item.code == row.levelId) {
						name = item.name
					}
				})
			}
			return name
		},
	},
	components: {
		FortressPagination,
	},
}
</script>

<style lang="scss" scoped>
.member {
	.form {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
}
</style>
